<template>
	<!-- 景点录制 -->
	<view class="explain" style="height: 100vh;">
		<statusBar></statusBar>
		<view style="height: 44px;">
			
			<uni-nav-bar left-icon="back" title="云龙湖旅游景区"></uni-nav-bar>
			<!-- <view style="height:10px;background-color: #f2f2f2;"></view> -->
		</view>
		<view class="uni-padding-wrap pl_info" style="height: 220px;">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="true" :autoplay="false" indicator-active-color="#27B28B">
						<swiper-item>
							<view class="swiper-item"><img src="../../static/img/home/banner1.png" /></view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item"><img src="../../static/img/home/banner2.png" /></view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item"><img src="../../static/img/home/banner3.png" /></view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="pl_word">
			各位旅客，我们现在位于云龙湖景区。云龙湖风景区总面积为11.4平方公里，周围山林面积为5.6平方公里，云龙湖水面面积为5.8平方公里，一湖波光浩渺，三面青山叠翠，形成了三面环山一面水的自然景色。若沿湖而行，岸草如茵，柳绿花红，四月新春，桃红绽放，柳抽新绿;到了仲夏，南岸一塘荷花刚刚开罢，石榴树上又是花红似火;时至深秋，虽有缤纷落叶，也有漫山红遍的枫林;到了严冬，一场雪，四野皑皑，更显这一湖碧波和几点红梅生意盎然。
			    云龙湖在古代是一片洼地。古徐州志记载：“城南九里许东西各有一山，因形似簸箕，俗称簸箕洼”洼久成湖，明万历年间因湖水经常泛滥成灾，做石狗以镇之，所以又有了石狗湖的名称。1963年正式改名为云龙湖。
			 “如能引上游丁塘之水，则此湖俨若西湖，而徐州俨若杭州。”这是早在900多年前，北宋大文豪苏东坡在任徐州知州时，站在云龙山上，对着脚下这个小小的湖泊“突发奇想”。可能苏轼本人也不会想到，时隔900年之后，他的想象变成了现实：1994年，杭州西湖和徐州云龙湖结为姊妹湖。
			    杭州西湖有条苏堤，徐州也有苏堤，只不过不在湖中，而是徐州城中的一条道路。那时苏东坡刚到徐州赴任，黄河决口，徐州被百年不遇的大洪水围困了70多天。后来苏东坡筑堤治洪，水退了，这条苏堤就成了城中的一条大道保留至今，
			   “如能引上游丁塘之水，则此湖俨若西湖，而徐州俨若杭州。”这是早在900多年前，北宋大文豪苏东坡在任徐州知州时，站在云龙山上，对着脚下这个小小的湖泊“突发奇想”。可能苏轼本人也不会想到，时隔900年之后，他的想象变成了现实：1994年，杭州西湖和徐州云龙湖结为姊妹湖。
			      杭州西湖有条苏堤，徐州也有苏堤，只不过不在湖中，而是徐州城中的一条道路。那时苏东坡刚到徐州赴任，黄河决口，徐州被百年不遇的大洪水围困了70多天。后来苏东坡筑堤治洪，水退了，这条苏堤就成了城中的一条大道保留至今，                     
		</view>
		<view style="height: 95px;">
			<jsfun-record @okClick="saveRecord">				    
			</jsfun-record> 
		</view>
		<!-- 保存 -->
		<uni-popup ref="popup" type="center" :show="issave">
			<view class="save_div">
				<view class="save_info">
					<view class="save_img">
						<img src="" alt="">
					</view>
					<view class="save_title">
						<view class="save_name">
							<text>名称 : </text><input type="text" value="云龙湖旅游景区录音">
						</view>
						<text>时长 : {{time}}</text>
					</view>
				</view>
				<view class="save_btn">
					<view @click="save_cl" class="save_item save_cancel">取消</view>
					<view class="line"></view>
					<view @click="save_sure" class="save_item save_save">保存</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import statusBar from "@/components/status-bar.vue"
	import jsfunRecord from '@/components/jsfun-record/jsfun-record.vue'
	export default {
		data() {
			return {
				issave: false,
				time:'00:00'
			}
		},
		components: {
			statusBar,
			jsfunRecord
		},
		methods:{
		    saveRecord: function(res) {
				this.issave = true
				var strs = "";
				var m = Math.floor(res.time/60);
				if(m<10) strs = "0"+m;
				
				var s = res.time%60;
				strs += (s<10) ? "分0"+s+"秒" : "分"+s+"秒";
				console.log(res.path,res.time,strs)
				this.time = strs
		        //do... 可以使用 uni.uploadFile 接口上传到服务器
		    },
			save_cl(){
				this.issave = false
			},
			save_sure(){
				this.issave = false
				uni.showToast({
					title:"保存成功",
					icon:"none"
				})
			}
		}
	}
</script>

<style scoped>
	.explain{
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #f5f5f5;
	}
	.explain >>> .uni-mask{
		top: 0 !important;
	}
	.explain >>> .uni-close-bottom{
		display: none;
	}
	page{
		background: #f5f5f5;
	}
	.content {
		padding: 20upx;
	}

	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		background: #fff;
		border-radius: 10upx;
		margin-top: 20upx;
		color: #333;
	}

	.list-title {
		font-size: 28upx;
		line-height: 88upx;
	}

	.list-pic {
		display: none;
		width: 28upx;
		height: 28upx;
	}

	.active {
		background: #169af3;
		color: #fff;
	}

	.active .list-pic {
		display: block;
	}
	.imt-audio{
		display: flex;
	}
	.imt-audio >>> .audio-control-wrapper{
		width: 60px;
		margin: 0;
	}
	.imt-audio >>> .audio-wrapper{
		flex: 1;
	}
	.imt-audio >>> .audio-control-switch{
		margin-left: 0;
		margin-right: 20px;
	}
	.pl_info{	
		text-align: center;
		margin-top: 5px;
	}
	.pl_info img{
		width:305px;
		height:220px;
		/* border: 1px solid red; */
	}
	.pl_word{
		flex: 1;
		overflow: scroll;
		font-size: 13px;
		color:rgba(102,102,102,1);
		padding: 13px 17px;
		background: white;
		text-align: left;
		letter-spacing: 2px;
	}
	.content{
		position: fixed;
		bottom: 0;
		width: 95%;
	}
	/* 保存 */
	.save_div{
		width:300px;
		height:200px;
		border-radius:8px;
		background: white;
	}
	.save_info{
		display: flex;
		align-items: center;
		padding: 13px;
		margin-top: 25px;
	}
	.save_info .save_img{
		width:80px;
		height:80px;
		border: 1px solid red;
	}
	.save_img img{
		width:80px;
		height:80px;
	}
	.save_title{
		flex: 1;
		padding: 20px 10px;
		font-size: 13px;
		color:rgba(153,153,153,1);
	}
	.save_name{
		display: flex;
	}
	.save_name input{
		flex: 1;
		padding-left: 5px;
		color:rgba(51,51,51,1);
		border-bottom: 1px solid rgba(170,170,170,1);
		font-size: 13px;
	}
	.save_btn{
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1px solid rgba(210,210,210,1);
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	.save_btn .save_item{
		width: 50%;
		text-align: center;
		font-size:14px;
		padding: 15px 0px;
	}
	.save_btn .save_cancel{
		color:rgba(153,153,153,1);
	}
	.save_btn .save_save{
		color:rgba(39,178,139,1);
	}
	.line{
		width:1px;
		height:36px;
		background:rgba(210,210,210,1);
	}
	.pl_info >>> .swiper{
		height:220px;
	}
</style>